<template>
	<view class="upload-box mar_top20 flex flex-wrap">
		<view>
			<view @tap="onChooseImage" class="custom-box flex justify-center align-center">
				<view class="text-center">
					<image class="up-icon" src="/static/image/icon/up.png" mode=""></image>
					<view class="fontS24 color_6D6D6D">上传图片/视频</view>
				</view>
			</view>
		</view>
		<!-- v-if="fileList.length > 0" -->
		<view class="file-box" v-for="(item,index) in fileList" :key="index">
			<template v-if="index < 5">
				<image class="file-image" :src="item" mode="aspectFill"></image>
				<image @tap="deletePic(item)" class="delete-file" src="/static/image/icon/dl.png" mode=""></image>
			</template>
			<view v-if="index >= 4" class="file-num flex justify-center align-center">{{fileList.length}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue';

	import {
		baseUrl
	} from '@/utils/request.js'

	const {
		proxy
	} = getCurrentInstance();

	const props = defineProps(['planUuid', 'fileList']);
	const emit = defineEmits(['uploadSuccess', 'onDeleteSuccess']);

	// 删除图片
	const deletePic = (event) => {
		proxy.$api.deletePlansImage({
			planUuid: props.planUuid,
			imgUrl: event
		}).then(res => {
			emit('onDeleteSuccess', true)
		})
	};
	// 上传图片
	const onChooseImage = () => {
		uni.chooseImage({
			count: 9,
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'], //camera 拍照 album 相册
			success: (res) => {
				if (res.errMsg === "chooseImage:ok") {
					uni.showLoading({
						title: "图片上传中"
					})
					function uploadFile(filePath) {
						return new Promise((resolve, reject) => {
							const task = uni.uploadFile({
								url: `${baseUrl}/uploadMultiple/${props.planUuid}`,
								filePath: filePath,
								name: 'images',
								header: {
									token: uni.getStorageSync("token")
								},
								success: (res) => {
									clearTimeout(timer);
									resolve(res);
									// uni.hideLoading();								
									// uni.showToast({
									// 	title: '上传成功',
									// 	icon: 'success',
									// 	duration: 2000
									// })
								},
								fail: (err) => {
									reject(err);
									uni.hideLoading();
									uni.showToast({
										title: '上传失败',
										icon: "error",
										duration: 2000
									})
								}
							});
							let timer = setTimeout(() => {
								task.abort(); // 强制截断上传
								uni.showToast({
									title: '上传超时，请重试',
									icon: "error",
									duration: 2000
								})
							}, 60000);
						});
					}
					Promise.all(res.tempFilePaths.map(uploadFile)).then((results) => {
						uni.hideLoading();
						uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 2000
						})
						let url = results.map(item => {
							let picture = JSON.parse(item.data)
							if (picture.code != '10000') {
								uni.showToast({
									title: '单图上传最大1MB',
									icon: 'none',
									duration: 1200
								})
							}
							return picture.data
						})
						emit('uploadSuccess', true)
					})
				}
			},
			fail() {
				// 选择图片异常失败
				uni.hideLoading();
			}
		})
	}
</script>

<style lang="scss" scoped>
	.upload-box {
		height: 450rpx;
		overflow: hidden;
		gap: 20rpx;

		.custom-box {
			width: 210rpx;
			height: 210rpx;
			border-radius: 8rpx;
			border: 1rpx dashed #AEAEAE;
			background: rgba(109, 109, 109, 0.1);

			.up-icon {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.file-box {
			width: 210rpx;
			height: 210rpx;
			border-radius: 8rpx;
			position: relative;

			.file-image {
				width: inherit;
				height: inherit;
				border-radius: inherit;
			}

			.file-num {
				width: inherit;
				height: inherit;
				background-color: rgba(34, 34, 34, 0.5);
				border-radius: inherit;
				position: absolute;
				font-size: 64rpx;
				font-weight: bold;
				color: #FFFFFF;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
			}

			.delete-file {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 2;
			}
		}
	}
</style>